<template>
  <div class="container">
    <div class="wrap">
      <el-card v-for="(item,index) in listData" :key="index" class="card">
        <span class="icon el-icon-platform-eleme" @click="link(item,'project')"></span>
        <div class="text">
          <h3>{{ item.name }}</h3>
          <p>{{ item.createdAt }}</p>
          <div class="bottom">
            <el-button size="small" type="primary" icon="el-icon-edit" circle @click="link(item,'edit')"></el-button>
            <!-- <el-button size="small" type="success" icon="el-icon-view" circle @click="link(item,'preview')"></el-button> -->
          </div>
        </div>
      </el-card>
    </div>
    <msg></msg>
  </div>
</template>

<script>
import { formatDate, api } from '~/assets/utils'
import msg from '@/components/msg'
export default {
  data() {
    return {
      totalPage: 0,
      tableData: [],
      listData: [],
      currentDate: formatDate(new Date(), 'yyyy-MM-dd hh:mm')
    }
  },
  components: {
    msg
  },
  methods: {
    link(item, type) {
      if (type === 'project') {
        this.$router.push({
          path: `${item.id}`
        })
      } else {
        this.$router.push({
          path: 'projectDetail',
          query: {
            id: item.id,
            name: item.name
          }
        })
      }
    }
  },
  mounted() {
    this.$axios.get(api.projectList).then(data => {
      this.listData = data.data.map(item => {
        item.createdAt = formatDate(item.createdAt, 'yyyy-MM-dd hh:mm')
        return item
      })
    })
  }
}
</script>

<style lang='scss' scoped>
.container {
  padding: 10px;
  width: 100%;
  overflow: hidden;
  display: flex;
  .wrap{
    display: flex;
    flex-wrap: wrap;
    flex:1;
  }
  .card {
    width: 250px;
    height: 225px;
    margin: 10px;
    /deep/ .el-card__body {
      padding: 10px;
      text-align: center;
    }
    .icon {
      display: block;
      font-size: 100px;
      color: #409eff;
    }
    h3 {
      font-size: 16px;
    }
    .bottom {
      display: flex;
      justify-content: center;
    }
    .bottom,
    .text {
      padding-top: 10px;
    }
  }
}
</style>
